<template>
  <div class="p_content">
    <mt-header title="注册代理">
      <router-link :to="{name:'mine'}" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <mt-field label="用户名" placeholder="请输入用户名"></mt-field>
    <mt-field label="手机号" placeholder="请输入手机号" type="tel"></mt-field>
    <mt-field label="身份证号" placeholder="请输入身份证号" type="number"></mt-field>
    <div @click="popupVisible = true">
      <mt-cell title="学校名称" isLink>
        <span class="mes_info">{{message?message: '请选择学校'}}</span>
      </mt-cell>
    </div>
    <mt-field label="验证码">
      <img alt="获取验证码">
    </mt-field>
    <p class="p_c_btn">提交</p>
    <mt-popup v-model="popupVisible" popupTransition="popup-fade" closeOnClickModal="true" position="bottom"
      style="width: 100%"
    >
      <mt-picker :slots="slots" @change="onValuesChange" :showToolbar="true">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class="">请选择学校</div>
          <div class="usi-btn-sure" @click="popupVisible = !popupVisible">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>

export default {
  name: '',
  data() {
    return {
      slots: [{
        values: ['苏州', '常州', '杭州', '湖州', '上海', '南京'],

      }],
      popupVisible: false,

    };
  },
  methods: {

    ShouPup() {
      this.popupVisible = true;
    },
    onValuesChange(picker, values) {
      [this.message] = values;
      if (values[0] > values[1]) {
        picker.setSlotValue(1, values[0]);
      }
    },

  },
  mounted() {

  },
};
</script>

<style lang="stylus">
.p_c_btn
  background #26a2ff
  width 96%
  margin 0 auto
  border-radius 0.1rem
  height 0.6rem
  line-height 0.6rem
  text-align center
  margin-top 0.4rem
  color #fff
.mes_info
  width:3.1rem
  text-align:left
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space:nowrap;
  display:block;
.picker-toolbar-title
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height:0.8rem;
  line-height: 0.8rem;
.usi-btn-cancel,.usi-btn-sure
  color: #FF6600
</style>

